<template>
	<div class="all" style="background-color: #0b122e;">
		<div class="header">
			网关设备数据统计
			<span id="localtime" style=" font-size:14px;position: absolute; right: 30px; top:-20px; ">{{nowTime}}</span>
		</div>
		<div id="content">
			<div class="content_left">
				<div class="online">
					<div class="title"><img src="" /> 网关分布情况</div>
					<div class="online_con" id="container2">
					</div>
				</div>
			</div>
			<div class="content_center">
				<div class="title"><img :src="image1" />
					<span>平台数据分布&nbsp;&nbsp;-&nbsp;&nbsp;全国</span>
				</div>
				<div class="center_top_con" id="distribution_map"></div>
			</div>
		</div>
	</div>
</template>
<script>
	import axios from 'axios'
const chinaJson = require('../../utils/china.json');
	export default{
		data(){
			return{
				image1:require("../images/icon03.png"),
				nowTime:'',
				dataList: [
				  { ename: "beijing", name: "北京"},
				  { ename: "tianjin", name: "天津" },
				  { ename: "shanghai", name: "上海" },
				  { ename: "chongqing", name: "重庆" },
				  { ename: "hebei", name: "河北" },
				  { ename: "henan", name: "河南"},
				  { ename: "yunnan", name: "云南" },
				  { ename: "liaoning", name: "辽宁" },
				  { ename: "heilongjiang", name: "黑龙江" },
				  { ename: "hunan", name: "湖南"},
				  { ename: "anhui", name: "安徽" },
				  { ename: "shandong", name: "山东" },
				  { ename: "xinjiang", name: "新疆" },
				  { ename: "jiangsu", name: "江苏" },
				  { ename: "zhejiang", name: "浙江" },
				  { ename: "jiangxi", name: "江西" },
				  { ename: "hubei", name: "湖北" },
				  { ename: "guangxi", name: "广西"},
				  { ename: "gansu", name: "甘肃" },
				  { ename: "shanxi", name: "山西" },
				  { ename: "neimenggu", name: "内蒙古" },
				  { ename: "shanxi1", name: "陕西" },
				  { ename: "jilin", name: "吉林" },
				  { ename: "fujian", name: "福建" },
				  { ename: "guizhou", name: "贵州" },
				  { ename: "guangdong", name: "广东" },
				  { ename: "qinghai", name: "青海" },
				  { ename: "xizang", name: "西藏" },
				  { ename: "sichuan", name: "四川" },
				  { ename: "ningxia", name: "宁夏" },
				  { ename: "hainan", name: "海南" },
				  { ename: "taiwan",name: "台湾"},
				  { ename: "xianggang", name: "香港" },
				  { ename: "aomen", name: "澳门" },
				],
				list:'',
			}
		},
		created() {
			this.showTimes();
			axios({
				url:"http://localhost:8080/gateway/getNum",
				method:'get',
			}).then(res=>{
				this.list=res.data.data;
				let dataList = this.dataList;
				for(let i = 0; i < dataList.length; i++){
					if(this.list[dataList[i].name]){
						dataList[i].value = this.list[dataList[i].name]
					}
					else{
						dataList[i].value =0;
					}
				}
				this.initEchart();
				console.log("!")
			})
		},
		methods:{
			timeFormate(timeStamp) {
			      let year = new Date(timeStamp).getFullYear();
			      let month =
			        new Date(timeStamp).getMonth() + 1 < 10
			          ? "0" + (new Date(timeStamp).getMonth() + 1)
			          : new Date(timeStamp).getMonth() + 1;
			      let date =
			        new Date(timeStamp).getDate() < 10
			          ? "0" + new Date(timeStamp).getDate()
			          : new Date(timeStamp).getDate();
			      let hh =
			        new Date(timeStamp).getHours() < 10
			          ? "0" + new Date(timeStamp).getHours()
			          : new Date(timeStamp).getHours();
			      let mm =
			        new Date(timeStamp).getMinutes() < 10
			          ? "0" + new Date(timeStamp).getMinutes()
			          : new Date(timeStamp).getMinutes();
			      let ss =
			        new Date(timeStamp).getSeconds() < 10
			          ? "0" + new Date(timeStamp).getSeconds()
			          : new Date(timeStamp).getSeconds();
			      let week = new Date(timeStamp).getDay();
			      let weeks = ["日", "一", "二", "三", "四", "五", "六"];
			      let getWeek = "星期" + weeks[week];
			      this.nowTime=year +"年" +month +"月" +date +"日" +" " +hh +":" + mm + ":" + ss + getWeek;
			    },
			    showTimes() {
			      this.timeFormate(new Date());
			      setInterval(this.showTimes, 1000);
			      // this.clear();
			    },
				initEchart() {
				  // let dataList = this.dataList;
				  // for(let i = 0; i < dataList.length; i++){
				  //   dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
				  // }
				  const _this = this;
				  var myChart = this.$echarts.init(document.getElementById("distribution_map"));
				  this.$echarts.registerMap('china', chinaJson)
				  var option = {
					//提示框
				    tooltip: {
				      //数据格式化
				      formatter: function(params, callback) {
				        return (
				          params.seriesName + "<br />" + params.name + "：" + params.value
				        );
				      },
				    },
				    visualMap: {
				      min: 0,
				      max: 250,
				      left: "left",
				      top: "bottom",
				      text: ["高", "低"], //取值范围的文字
				      inRange: {
				        color: ["#e0ffff", "blue"], //取值范围的颜色
				      },
				      show: true, //图注
				    },
				    geo: {
				      map: 'china', //引入地图数据
				      roam: true ,//不开启缩放和平移
				      zoom: 1, //视角缩放比例
				      label: {
				        normal: {
				          show: true,
				          fontSize: "10",
				          color: "rgba(0,0,0,0.7)",
				        },
				      },
				      itemStyle: {
				        normal: {
				          borderColor: "rgba(0, 0, 0, 0.2)",
				        },
				        emphasis: { //高亮的显示设置
				          areaColor: "skyblue", //鼠标选择区域颜色
				          shadowOffsetX: 0,
				          shadowOffsetY: 0,
				          shadowBlur: 20,
				          borderWidth: 0,
				          shadowColor: "rgba(0, 0, 0, 0.5)",
				        },
				      },
				    },
				    // 鼠标悬浮提示框
				    series: [
				      {
				        name: "省份",
				        type: "map",
				        geoIndex: 0,
				        data: this.dataList,
				      },
				    ],
				  };
				  myChart.setOption(option);
				  myChart.on("click", function(params) {
				    if(!params.data.ename){
				      alert('暂无' + params.name + '地图数据');
				      return;
				    }
				    _this.$router.push({
				      path: "/user/province",
				      query: { provinceName: params.data.ename, province: params.name },
				    });
					
				  });
				  var mychart1=this.$echarts.init(document.getElementById("container2"));
				  var option1={
				  			legend: {
				  				x : 'center',
				  				y : 'bottom',
				  				itemWidth: 8,
				  				itemHeight: 8,
				  				textStyle:{//图例文字的样式
				  					color:'#fff',
				  					fontSize:12
				  				},
				  			},
				  			calculable : true,
				  			series : [
				  				{
				  					name:'网关分布',
				  					type:'pie',
				  					radius : [30, 100],
				  					center : ['50%', '45%'],
				  					roseType : 'area',
				  					data:this.dataList
				  				}
				  			]
				  				};
				  			mychart1.setOption(option1, true);
				},
				
		},
		mounted() {
			// this.initEchart();
		}
	}
	
</script>

<style>
.all{
		font-family: "微软雅黑";
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		background-color: #0b122e;
		color: #fff;
		position: relative;
		font-family: "微软雅黑";
		background-color: #0b122e;
}
.header{
		width:100%;
		height: 10vh;
		background: url(../images/bg_top.png) center no-repeat ; 
		text-align: center; 
		font-size: 36px; 
		color: #00f6ff;
		line-height: 90px;
		margin: 0 auto;
}
table
  {border-collapse:collapse;}
img{vertical-align: middle;}
ul { margin: 0; padding: 0;}
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
	overflow: hidden;
}

.clearfix {
	*zoom: 1;
}
#content{
	width: 100%;
	height: 85vh;
	margin: 30px auto 0 auto;
}
.content_left{
	width: 25%;
	height: 95%;
	float: left;
	margin-left:2%;
}
.content_center{
	width: 60%;
	height: 95%;
	margin-left: 35%;
	background-color: red;
	background: url(../images/center01.png) no-repeat;
	border: #13CE66;
}
.content_center .center_top{width: 1050px; height: 650px;  float: left; background: url(../images/center01.png) no-repeat;}
.content_left .dtuplc{width: 355px; height: 180px; padding: 15px 15px 0 15px; background: url(../images/zuoyi.png) top no-repeat;}
.dtu{width: 177px; height: 180px; float: left;}
.plc{width: 177px; height: 180px; float: left;}
.content_left .online{
	width: 100%; 
	height: 100%; 
	float: left; 
	background-size: 100% 100%;
	/* background: url(../images/zuo2.png)no-repeat; */
	}
.title{width: 100%; height: 10%; float: left; color: #00f6ff; font-size: 20px; line-height: 70px; background:url(../images/bottom_line.png) bottom no-repeat; text-align: center;}
.content_left .title img{vertical-align: middle;}
.online .online_con{width: 100%; height: 90%;float: left;}
.content_left .industry{width: 385px; height: 425px; float: left; background: url(../images/hangye.png) no-repeat; margin-top: 20px;}
.industry .industry_con{width: 365px; height: 335px; padding: 10px; float: left;}
.content_center .title{
	width: 100%;
	height: 10%; float: left; color: #00f6ff; font-size: 20px; line-height: 70px; 
	background:url(../images/bottom_line.png) bottom center no-repeat;
	text-align: center;}
.content_center .title img{vertical-align: middle;}
.center_top_con{ 
	width: 90%;
	 height: 85%;
	margin-left: 5%;
	float: left;
	}
.panel-table {text-align: left;color: #ccc;margin: 0 auto !important;width: 96%;	margin-top: 20px !important;padding: 0.5rem 0 !important;font-size: 1.2rem;}
.content_center .center_bot{width: 990px; height: 280px; float: left; background: url(../images/center02.png) no-repeat; margin-top: 20px; padding: 10px 30px;}
</style>